<template>
  <!-- :visible="popoverVisible" trigger="click" placement="bottom" :teleported="false"
        popper-class="device-alert-popover" popper-style="" @after-enter="show" @before-enter="show" -->
  <!-- <el-popover
    trigger="hover"
    placement="bottom"
    :teleported="false"
    popper-class="device-alert-popover"
    popper-style=""
    @before-enter="show"
  > -->
  <el-popover
    trigger="hover"
    placement="bottom"
    :teleported="false"
    popper-class="device-alert-popover"
    popper-style=""
  >
    <template #reference>
      <!-- 双击 showMore 单机 show -->

      <div class="mark" :style="{ ...position }" @dblclick="showMore">
        <errorBox
          @click.stop
          :locationCode="options.code"
          boxType="home"
        ></errorBox>
        <div class="location-label" :class="`label${locationId}`" v-if="status">
          <img
            :src="requireImgUrl('image/dashboard/locationLabel', '正常')"
            class="labelimg"
          />
          <img
            :src="requireImgUrl('image/dashboard/locationLabel', '正常动效')"
            class="labelimg animation"
          />
          <div class="labelName static">{{ name }}</div>
        </div>
        <div class="location-label" :class="`alertlabel${locationId}`" v-else>
          <img
            :src="requireImgUrl('image/dashboard/locationLabel', '告警')"
            class="labelimg"
          />
          <img
            :src="requireImgUrl('image/dashboard/locationLabel', '告警动效')"
            class="labelimg animation"
          />
          <div class="labelName alert">{{ name }}</div>
        </div>
      </div>
    </template>

    <!-- 关闭弹框时，销毁内部元素 -->

    <div class="location-info-box">
      <div class="box-content">
        <div class="box-header">
          <div class="labelName">
            {{ name }}
          </div>
          <div class="more">
            未处理告警数
          </div>
        </div>
        <div class="box-body">
          <div class="data-item" v-for="(item, index) in dialogData">
            <div class="data-name" :style="switchStyle(item.alertGrade)">
              {{ item.name }}
            </div>
            <div class="data-value">{{ item.value }}</div>
          </div>
        </div>
      </div>
    </div>
  </el-popover>
</template>

<script setup lang="ts">
import { getEquipmentIds } from "@/api/equipment";
import { getGeneralValues } from "@/api/general";
import { UseLocation } from "@/stores/location";
import { requireImgUrl } from "@/utils/localurl/metaUrl";
import { toRefs, ref, watch } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const location = UseLocation();
const props = defineProps({
  options: {
    type: Object,
    default: () => ({}),
  },
  visible: {
    type: Boolean,
    default: false,
  },
});
const valueCode = [
  { code: "AI_ALERT_TODAY_FOR_GRADE", name: "一般", alertGrade: "INFO" },
  { code: "AI_ALERT_TODAY_FOR_GRADE", name: "告警", alertGrade: "WARN" },
  { code: "AI_ALERT_TODAY_FOR_GRADE", name: "紧急", alertGrade: "ERROR" },
];
const locationCode = [
  { code: "LOCATION_01", name: "01区" },
  { code: "LOCATION_02", name: "02区" },
  // { code: "LOCATION_03", name: "03区" },
  // { code: "LOCATION_04", name: "04区" },
];
let dialogData = ref([]);
const show = async () => {
  // // 中转数组
  // let templateArr = [];
  // // 目标数组
  // dialogData.value = [];
  // const ids = (await getEquipmentIds(locationCode[locationId.value - 1].code))
  //   .data;
  // let reqData = [];
  // valueCode.forEach((item: any, index) => {
  //   reqData = [
  //     {
  //       code: item.code,
  //       params: { equipmentIds: ids.toString(), alertGrade: item.alertGrade },
  //     },
  //   ];
  //   // reqData.push({ code: item.code, params: { equipmentIds: ids.toString(), alertGrade: item.alertGrade } })
  //   getGeneralValues(reqData)
  //     .then((res) => {
  //       templateArr.push({
  //         name: item.name,
  //         value: res.data[item.code] ? res.data[item.code].data : 0,
  //         alertGrade: item.alertGrade,
  //       });

  //       // dialogData.value.push({
  //       //   name: item.name,
  //       //   value: res.data[item.code] ? res.data[item.code].data : 0,
  //       //   alertGrade: item.alertGrade,
  //       // });
  //       templateArr.forEach((item, index) => {
  //         if (item.name == "一般") {
  //           dialogData.value[0] = item;
  //         }
  //         if (item.name == "告警") {
  //           dialogData.value[1] = item;
  //         }
  //         if (item.name == "紧急") {
  //           dialogData.value[2] = item;
  //         }
  //       });
  //     })
  //     .finally(() => {
  //       popoverVisible.value = true;
  //     });
  // });
};
const showMore = () => {
  location.SetLocationIndex(locationId.value);
  router.push("alert");
  localStorage.setItem("locationId", locationId.value.toString());
};
const name = ref();
const locationId = ref();
const position = ref();
const popoverVisible = ref();
const status = ref();
const code = ref();
const data = ref();
const staticLabel = ref();
const alertLabel = ref();
const { options } = toRefs(props);
const odata = ref();
const initLabelData = () => {
  name.value = odata.value.name;
  locationId.value = odata.value.locationId;
  position.value = odata.value.position;
  popoverVisible.value = odata.value.popoverVisible;
  status.value = odata.value.status;
  code.value = odata.value.code;
  data.value = odata.value.data;
  staticLabel.value = odata.value.staticLabel;
  alertLabel.value = odata.value.alertLabel;
};

const switchStyle = (error: string) => {
  switch (error) {
    case "INFO":
      return "color:rgba(44, 179, 255, 1);border:1px solid rgba(44, 179, 255, 1);background-color:rgba(18, 62, 102, 0.40);";

    case "WARN":
      return "color:rgba(251, 197, 49, 1);border:1px solid rgba(251, 197, 49, 1);background-color:rgba(128, 100, 25, 0.40);";
    case "ERROR":
      return "color:rgba(255, 63, 52, 1);border:1px solid rgba(255, 63, 52, 1);background-color:rgba(128, 32, 25, 0.40);";
  }
};

watch(
  () => options.value,
  (newVal) => {
    console.log("标签数据发生变化。。。。。。。。", newVal);
    odata.value = newVal;
    initLabelData();
  },
  { immediate: true, deep: true }
);
// const { name, locationId, position, popoverVisible, status, code, data, staticLabel, alertLabel } = toRefs(odata.value)
</script>

<style scoped lang="scss">
.mark {
  z-index: 8;
  cursor: pointer;
  position: absolute;

  .location-label {
    position: relative;
    font-size: clamp(1.25rem, 1.04vw, 2.5rem);
    display: flex;
    justify-content: center;
    align-items: center;

    .labelName {
      font-weight: bold;
    }

    .static {
      background: linear-gradient(180deg, #0094ff 0%, #18f1e8 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      z-index: 9;
    }

    .alert {
      background: linear-gradient(180deg, #e53c3c 0%, #f1a718 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      z-index: 9;
    }
  }
}

.location-info-box {
  width: clamp(12.313rem, 10.26vw, 24.625rem);
  height: clamp(9.813rem, 8.18vw, 19.625rem);
  background-color: rgba(9, 47, 64, 0.9);
  position: relative;
  border: 2px solid rgba(38, 190, 255, 1);

  .top {
    position: absolute;
    top: -20%;
    left: -10%;
    transform: translate(10%, 30%);
    width: clamp(9.688rem, 8.07vw, 19.375rem);
    height: clamp(2.75rem, 2.29vw, 5.5rem);
  }

  .down {
    position: absolute;
    bottom: -20%;
    right: -10%;
    transform: translate(-10%, -30%);
    width: clamp(9.688rem, 8.07vw, 19.375rem);
    height: clamp(2.75rem, 2.29vw, 5.5rem);
  }

  .box-content {
    width: 100%;
    height: 100%;
    padding: clamp(0.688rem, 0.57vw, 1.375rem);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;

    .box-header {
      display: flex;

      .labelName {
        color: rgba(38, 190, 255, 1);
        font-size: clamp(1rem, 0.83vw, 2rem);
      }

      .more {
        font-size: clamp(0.75rem, 0.63vw, 1.5rem);
        color: rgba(38, 190, 255, 1);
        margin-left: auto;
        display: flex;
        align-items: center;
        cursor: pointer;
      }
    }

    .box-body {
      display: flex;
      flex-direction: column;
      width: 100%;
      flex: 1;
      align-content: space-between;

      .data-item {
        display: flex;
        font-size: clamp(0.875rem, 0.73vw, 1.75rem);
        width: 100%;
        justify-content: space-between;
        flex: 1;
        align-items: center;

        .data-name {
          font-size: clamp(0.75rem, 0.63vw, 1.5rem);
          width: clamp(2.813rem, 2.34vw, 5.625rem);
          height: clamp(1.5rem, 1.25vw, 3rem);
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .data-value {
          color: rgba(255, 255, 255, 1);
        }
      }
    }
  }
}

.labelimg {
  position: absolute;
}

// 每两秒旋转一圈
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.animation {
  animation: rotate 2s linear infinite;
}

// .label1 {
//     .labelimg {
//         width: clamp(5.625rem, 4.69vw, 11.25rem);
//     }

//     .labelName {
//         top: 20%;
//         left: 26%;
//     }
// }

// .alertlabel1 {
//     .labelName {
//         top: 20%;
//         left: 26%;
//     }

//     .labelimg {
//         width: clamp(5.625rem, 4.69vw, 11.25rem);
//     }
// }

// .label2 {
//     .labelimg {
//         width: clamp(6.188rem, 5.16vw, 12.375rem);
//     }

//     .labelName {
//         top: 26%;
//         left: 30%;
//     }
// }

// .alertlabel2 {
//     .labelimg {
//         width: clamp(6.188rem, 5.16vw, 12.375rem);
//     }

//     .labelName {
//         top: 26%;
//         left: 30%;
//     }
// }

// .label3 {
//     .labelimg {
//         width: clamp(7.125rem, 5.94vw, 14.25rem);
//     }

//     .labelName {
//         top: 30%;
//         left: 33%;
//     }
// }

// .alertlabel3 {
//     .labelimg {
//         width: clamp(7.125rem, 5.94vw, 14.25rem);
//     }

//     .labelName {
//         top: 30%;
//         left: 33%;
//     }
// }
</style>
